<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
	        <top></top>
	        <div class="hei10"></div>
	        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：分销后台>
            <router-link to="/wodezhanghu/wodezhanghu" style="color: #409eff;">我的账户</router-link>>
            导出明细
          </div>

        <div class="hei10"></div>


				<div class="title">导出消费明细</div>
				<div class="my">
					<el-date-picker v-model="time" type="month" value-format="yyyy-MM" placeholder="请选择导出月份">
					</el-date-picker>
					<el-button type="danger" size="mini" @click="exportData" :loading="daochuing">{{daochuingz}}
					</el-button>

				</div>
				<div class="exportall" v-loading="loading" style="margin: 20px;">
					<div class="list">
						<div>数据日期</div>
						<div>下载数据</div>
					</div>
					<div class="list l2" v-for="(item,index) in list" :key="index">
						<div>{{item.name}}</div>
						<div>
							<el-button type="primary" :loading="item.status != 2" size="mini"
								@click="xiazai(item.cloud_filename)">下载数据</el-button>
							<el-button type="danger" size="mini" @click="shanchu(item.id)">删除</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<foot></foot>
	</div>
</template>

<script>
	import axios from "axios";
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'xiaofeimingxidaochu',
		data() {
			return {
				msg: "hello",
				options: "",
				value: "",
				list: [],
				loading: true,
				url: "",
				daochuing: false,
				daochuingz: '生成导出数据',
				lunxun: "",

				time: ""
			}
		},
		created() {
			this.url = window.location.origin + "/"
			this.onelist();
		},

		destroyed() {
			clearTimeout(this.lunxun)
		},
		methods: {
			exportData() {
				if (this.time == "" || this.time == undefined) {
					this.$message.warning('请先选择月份！');
					return
				}
				this.daochuing = true
				this.daochuingz = "数据生成中"
				let that = this
				axios.get("/api/plan-market/shop/transaction/export?month=" + this.time)
					.then(function(response) {
						if (response.data.msg.code == 0) {
							that.loading = true
							that.getlist();
							that.daochuing = false
							that.daochuingz = "生成导出数据"
						} else {
							that.$message.error(response.data.msg.info);
							that.daochuing = false
							that.daochuingz = "生成导出数据"
						}
					});
			},
			shanchu: function(id) {
				var that = this
				this.$confirm('确定删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post("/api/plan-market/shop/transaction/del", {
							id: id
						})
						.then(function(response) {
							if (response.data.msg.code == 0) {
								that.$message.success('已删除');
								that.getlist()
							} else {
								that.$message.error(response.data.msg.info);
							}
						});
				})
			},
			//轮询获取下载是否完成
			onelist: function() {
				this.getlist()
				this.loading = true
				var that = this
				that.lunxun = setTimeout(function() {
					that.onelist()
				}, 10000)
			},
			getlist: function() {
				axios.get("/api/plan-market/transaction/export/list")
					.then(response => {
						this.loading = false
						if (response.data.msg.code == 0) {
							this.list = response.data.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}

					})
			},
			xiazai: function(url) {
				//地址配置,用于下载模板

				var a = document.createElement('a');

				a.setAttribute('href', this.url + url);
				a.click();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index {



				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272;
				}

				.my {
					display: flex;
          padding: 20px;
					margin: 0px auto;

					.myid {
						font-size: 14px;
						color: #DD2727;
						padding-left: 10px;
						line-height: 30px;
						margin-right: 20px;
					}

					.el-date-editor {
						margin-right: 20px;
					}
				}

				.exportall {

					margin: 0 auto;
					border: 1px #EAEAEA solid;
					border-right: 0;
					border-bottom: 0;

					.list {
						display: flex;
						text-align: center;
						border-bottom: 1px #EAEAEA solid;
						font-size: 14px;

						div {
							flex: 1;
							line-height: 45px;
							border-right: 1px #EAEAEA solid;
							color: #666;
						}
					}

					.l2 {
						font-size: 14px;
						color: #727272
					}
				}

	}
</style>
